* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  font-family: 'Courier New', monospace;
  color: #0ff;
}

#root {
  width: 100%;
  height: 100%;
}

.game-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 赛博朋克风格UI元素基础样式 */
.cyber-panel {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #0ff;
  box-shadow: 0 0 10px #0ff, inset 0 0 5px #0ff;
  color: #0ff;
  padding: 10px;
}

.cyber-button {
  background-color: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  padding: 8px 16px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.cyber-button:hover {
  background-color: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 10px #0ff;
}

.cyber-button:active {
  background-color: rgba(0, 255, 255, 0.4);
}

/* 像素风格动画效果 */
@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #ff00c1, -0.05em -0.025em 0 #0ff;
  }
  14% {
    text-shadow: 0.05em 0 0 #ff00c1, -0.05em -0.025em 0 #0ff;
  }
  15% {
    text-shadow: -0.05em -0.025em 0 #ff00c1, 0.025em 0.025em 0 #0ff;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #ff00c1, 0.025em 0.025em 0 #0ff;
  }
  50% {
    text-shadow: 0.025em 0.05em 0 #ff00c1, 0.05em 0 0 #0ff;
  }
  99% {
    text-shadow: 0.025em 0.05em 0 #ff00c1, 0.05em 0 0 #0ff;
  }
  100% {
    text-shadow: -0.025em 0 0 #ff00c1, -0.025em -0.025em 0 #0ff;
  }
}

.glitch-text {
  animation: glitch 1s infinite;
  font-weight: bold;
}